import React, { useState, useEffect } from 'react'
import { View, Picker, RichText } from '@tarojs/components'
import { AtForm, AtInput, AtButton, AtNoticebar } from 'taro-ui'

import './index.less'
import "taro-ui/dist/style/components/list.scss";
import "taro-ui/dist/style/components/countdown.scss";
import "taro-ui/dist/style/components/tag.scss";
import "taro-ui/dist/style/components/noticebar.scss";

import useModel from 'flooks';
import store from '../../../stores/index'

export default (props: any) => {
  // nsTypeId = 1 军训服  2 医用服   3 电话卡    4生活用品类（包含路由器）
  const { nsTypeId, detail } = props.data
  const { nsOrderParams, nsOrderParamsChange } = useModel(store.nsOrderParams, ['nsOrderParams'])
  const { nsTelInfo } = useModel(store.nsTelInfo, ['nsTelInfo'])
  const { cont } = nsTelInfo
  console.log(cont)
  useEffect(() => {
    nsOrderParamsChange({
      name: '',
      studentNum: '',
      telInput: '',
      height: '',
      weight: '',
      size: '',
      tel: '',
      schoolType: 0,
      postage: '',
      idCard: '',
    })
  }, [])
  //  表单数据
  // const [formData, setFormData] = useState({
  //   name: '',
  //   studentNum: '',
  //   telInput: '',
  //   height: '',
  //   weight: '',
  //   size: '',
  // })

  // 身高数组
  const listHeight = [
    '150cm以下',
    '150cm-155cm',
    '155cm-160cm',
    '160cm-165cm',
    '165cm-170cm',
    '170cm-175cm',
    '175cm-180cm',
    '180cm-185cm',
    '185cm-190cm',
    '190cm以上',
  ]
  // 体重数组
  const listWeight = [
    '40kg以下',
    '40kg-45kg',
    '45kg-50kg',
    '50kg-55kg',
    '55kg-60kg',
    '60kg-65kg',
    '65kg-70kg',
    '70kg-75kg',
    '75kg-80kg',
    '80kg-85kg',
    '85kg-90kg',
    '90kg-95kg',
    '95kg-100kg',
    '100kg以上',
  ]
  // 鞋码
  const listSize = [
    '34以下',
    '34',
    '35',
    '36',
    '37',
    '38',
    '39',
    '40',
    '41',
    '42',
    '43',
    '44',
    '44以上'
  ]

  // 表单改变
  const onChange = (val, name) => {
    const _formData = { ...nsOrderParams }
    _formData[name] = val
    nsOrderParamsChange(_formData)
  }

  const selectChange = (e, name, arr) => {
    const index = parseInt(e.target.value)
    const _formData = { ...nsOrderParams }
    _formData[name] = arr[index]
    nsOrderParamsChange(_formData)
  }

  return (
    <View className='form'>
      <AtNoticebar>请填写基本信息</AtNoticebar>
      <AtForm>
        <AtInput
          name='name'
          title='姓名'
          type='text'
          placeholder='请输入姓名'
          value={nsOrderParams.name}
          onChange={(val) => { onChange(val, 'name') }}
        />
        <AtInput
          name='studentNum'
          title='考生号'
          type='text'
          placeholder='请输入考生号'
          value={nsOrderParams.studentNum}
          onChange={(val) => { onChange(val, 'studentNum') }}
        />
        <AtInput
          name='idCard'
          title='身份证号'
          type='idcard'
          placeholder='请输入身份证号'
          value={nsOrderParams.idCard}
          onChange={(val) => { onChange(val, 'idCard') }}
        />
        <AtInput
          name='telInput'
          title='联系电话'
          type='phone'
          placeholder='请输入联系电话'
          value={nsOrderParams.telInput}
          onChange={(val) => { onChange(val, 'telInput') }}
        />
        {
          nsTypeId <= 2 && <Picker mode='selector' range={listHeight} onChange={(e) => { selectChange(e, 'height', listHeight) }}>
            <AtInput
              placeholderStyle={'color:#ccc;font-size:16px'}
              className='input'
              name='height'
              title='身高'
              type='text'
              placeholder='请选择身高'
              value={nsOrderParams.height}
              onChange={() => { }}
              editable={false}
            />
          </Picker>
        }
        {
          nsTypeId <= 2 && <Picker mode='selector' range={listWeight} onChange={(e) => { selectChange(e, 'weight', listWeight) }}>
            <AtInput
              placeholderStyle={'color:#ccc;font-size:16px'}
              className='input'
              name='weight'
              title='体重'
              type='text'
              placeholder='请选择体重'
              value={nsOrderParams.weight}
              onChange={() => { }}
              editable={false}
            />
          </Picker>
        }
        {
          nsTypeId === 1 && <Picker mode='selector' range={listSize} onChange={(e) => { selectChange(e, 'size', listSize) }}>
            <AtInput
              placeholderStyle={'color:#ccc;font-size:16px'}
              className='input'
              name='weight'
              title='鞋码'
              type='text'
              placeholder='请选择鞋码'
              value={nsOrderParams.size}
              onChange={() => { }}
              editable={false}
            />
          </Picker>
        }
      </AtForm>
      {
        parseInt(nsTypeId) !== 3 ? <View className='rich'>
          <RichText nodes={detail} />
        </View>:<View className='cont'>
            <AtNoticebar>资费详情</AtNoticebar>
            {
              cont.split('|').map((item)=>(
                <View className='contLi'>{item}</View>
              ))
            }
        </View>
      }
    </View>
  )
}
